<template>
    <div class="index">
        <el-container>
            <el-header style="padding: 0px; border-bottom: 1px solid #dfe0e5;">
                <el-row>
                    <el-col :span="3" style="width: 240px;">
                        <div class="logo">结构健康监测系统</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <div class="hamburgermain"><i class="hamburger"></i></div>
                        </div>
                    </el-col>
                    <el-col :span="5" style="float:right;">
                        <div class="grid-content bg-purple-light">
                            <div class="usernav">
                                <ul style="border-right: none;">
                                    <li><i class="line"></i></li>
                                    <li>
                                        <div class="face"><i class="notice-ico"></i> <span class="label-danger">2</span>
                                        </div>
                                    </li>
                                    <li><img class="img-circle " src="../assets/admin.png"></li>
                                    <li class="user-name">
                                        <el-dropdown>
                                            <span class="el-dropdown-link">admin<i
                                                    class="el-icon-caret-bottom el-icon--right"
                                                    style="color: #4c4c4c;"></i></span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item>资料修改</el-dropdown-item>
                                                <el-dropdown-item>个人中心</el-dropdown-item>
                                                <el-dropdown-item>退出登录</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </li>
                                    <li><i class="navigate-ico"></i></li>
                                    <li><i class="enter-ico"></i></li>
                                </ul>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container style="background: #f1f2f7;">
                <el-aside style="width: 240px; background: #24272d;">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content bg-purple-dark">
                                <el-menu background-color="#24282e" text-color="#aeb0b2" class="el-menu-vertical-demo"
                                         @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                                    <el-submenu >
                                        <template style="background-color: red;" slot="title"><i class="el-icon-index"></i><span slot="title">首页</span>
                                        </template>
                                    </el-submenu>
                                    <el-submenu index="1">
                                        <template slot="title"><i class="el-icon-basicsinfo"></i><span
                                                slot="title">基础信息</span></template>
                                        <el-menu-item index="1-1">结构物信息</el-menu-item>
                                        <el-menu-item>结构物详情</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="2">
                                        <template slot="title"><i class="el-icon-parameter"></i><span
                                                slot="title">参数配置</span></template>
                                        <el-menu-item index="1-1">结构物信息</el-menu-item>
                                        <el-menu-item index="1-2">结构物详情</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="3">
                                        <template slot="title"><i class="el-icon-datetime"></i><span
                                                slot="title">实时数据</span></template>
                                        <el-menu-item index="1-1">结构物信息</el-menu-item>
                                        <el-menu-item index="1-2">结构物详情</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="4">
                                        <template slot="title"><i class="el-icon-statistics"></i><span
                                                slot="title">统计数据</span></template>
                                        <el-menu-item index="1-1">结构物信息</el-menu-item>
                                        <el-menu-item index="1-2">结构物详情</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="5">
                                        <template slot="title"><i class="el-icon-state"></i><span
                                                slot="title">状态监测</span></template>
                                        <el-menu-item index="1-1">结构物信息</el-menu-item>
                                        <el-menu-item index="1-2">结构物详情</el-menu-item>
                                    </el-submenu>
                                    <el-submenu index="6">
                                        <template slot="title"><i class="el-icon-set"></i><span slot="title">系统设置</span>
                                        </template>
                                        <el-menu-item index="1-1">结构物信息</el-menu-item>
                                        <el-menu-item index="1-2">结构物详情</el-menu-item>
                                    </el-submenu>
                                </el-menu>
                            </div>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main style="padding: 0px;">
                    <el-row style="height: 100%;overflow-y: auto;overflow-x: hidden; ">
                        <el-col :span="6">
                            <el-breadcrumb separator="/" class="breadcrumb">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                        <el-col :span="24" style="margin: 0px 0px 12px 0px; ">
                            <div class="grid-content bg-purple-dark clearfix"
                                 style=" background: #fff; padding: 15px 10px 15px 10px;">
                                <div class="form-l">
                                    <el-select size="small" v-model="value" placeholder="桥梁名称">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="form-l">
                                    <el-input size="small" v-model="input" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="form-l">
                                    <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
                                </div>
                                <div class="form-r">
                                    <el-button icon="el-icon-plus" type="warning" size="small">添加桥梁</el-button>
                                    <el-button size="small" icon="el-icon-edit-outline" type="warning" plain>警告按钮
                                    </el-button>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24" style="padding-bottom:20px; ">
                            <div class="grid-content bg-purple-dark"
                                 style="background: #fff; padding: 0px 15px 60px 15px; margin-bottom: 55px;">
                                <el-table
                                        :data="tableData"
                                        style="width: 100%; margin-bottom: 20px">
                                    <el-table-column
                                            prop="date"
                                            label="日期"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="姓名"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="address"
                                            label="地址">
                                    </el-table-column>
                                </el-table>
                                <el-pagination style="float:right; background: #fff"
                                               @size-change="handleSizeChange"
                                               @current-change="handleCurrentChange"
                                               :current-page.sync="currentPage2"
                                               :page-sizes="[100, 200, 300, 400]"
                                               :page-size="100"
                                               layout="sizes, prev, pager, next"
                                               :total="1000">
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    export default {
        name: "index",

        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                activeName: 'first',
            };
            return {
                tableData: Array(14).fill(item)
            }
        }
    }
</script>

<style scoped>
    html, body {
        width: 100%;
        height: 100%;
    }

    .index {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    ul {
        padding: 0px;
        margin: 0px;
    }

    .clearfix:after {
        content: "\200B";
        display: block;
        height: 0;
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    /*  头部导航样式开始*/

    .usernav {
        height: 60px;
        float: right;
    }

    .usernav > ul li {
        display: block;
        float: left;
        height: 60px;
        line-height: 60px;
        margin-right: -1px;
        position: relative;
        transition: background-color 0.3s ease 0s;
        cursor: pointer;
    }

    .usernav > ul > .user-name {
        padding: 0px 10px 0px 10px;
    }

    .usernav > ul li a {
        color: #4c4c4c;
        text-decoration: none;
    }

    .face {
        position: relative;
        cursor: pointer;
        float: right;
        height: 60px;
        line-height: 60px;
        padding: 0 15px;
    }

    .label-danger {
        position: absolute;
        top: 6px;
        left: 25px;
        font-size: 10px;
        line-height: 7px !important;
        font-weight: 400 ! important;
        border-radius: 15px;
        padding: 4px;
        z-index: 4;
        background: #ff4350;
        color: #fff;
    }

    .navigate-ico,
    .enter-ico, .notice-ico {
        background-repeat: no-repeat;
        height: 18px;
        width: 18px;
        float: right;
        margin: 20px 0 0;
    }

    .enter-ico {
        margin: 22px 10px 0px 10px;
        background-position: -103px -0px;
        cursor: pointer;
        background-image: url("../assets/loginico.png");
    }

    .enter-ico:hover {
        background-position: -103px -24px;
    }

    .navigate-ico {
        margin: 22px 10px 0px 10px;
        background-position: -78px -0px;
        background-image: url("../assets/loginico.png");
    }

    .navigate-ico:hover {
        background-position: -78px -24px;
    }

    .notice-ico {

        background-position: -55px -0px;
        background-image: url("../assets/loginico.png");
    }

    .notice-ico:hover {
        background-position: -55px -24px;
    }

    .img-circle {
        border-radius: 50%;
        margin: 10px 0px 0px 15px;
    }

    .line {
        width: 1px;
        height: 30px;
        background: #eeeff4;
        display: inline-block;
        margin: 16px 0px 0px 0px;
    }

    .hamburger {
        width: 28px;
        height: 28px;
        background-image: url("../assets/loginico.png");
        background-position: left -27px;
        display: inline-block;
        float: left;
        margin: 20px 0px 0px 10px;
        cursor: pointer
    }

    .admin > ul li {
        width: 100%;
        height: 40px;
        display: block;
        line-height: 40px;
    }

    .admin > ul li a {
        color: #555;
    }

    /*  头部导航样式结束*/

    /* 左侧样式开始*/
    .logo {
        font-size: 26px;
        height: 60px;
        line-height: 60px;
        font-family: "微软雅黑";
        color: #fff;
        font-weight: bold;
        text-align: center;
        background: #31394d;
    }

    .el-icon-index, .el-icon-basicsinfo, .el-icon-parameter, .el-icon-datetime, .el-icon-statistics, .el-icon-state, .el-icon-set {
        width: 24px;
        height: 24px;
        background-image: url("../assets/loginico.png");
        background-position: left -89px;
    }

    .el-icon-basicsinfo {
        background-position: -32px -89px;
    }

    .el-icon-parameter {
        background-position: -63px -89px;
    }

    .el-icon-datetime {
        background-position: -95px -89px;
    }

    .el-icon-statistics {
        background-position: -129px -89px;
    }

    .el-icon-state {
        background-position: -161px -89px;
    }

    .el-icon-set {
        background-position: -195px -89px;
    }

    .breadcrumb {
        width: 176px;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        text-align: left;
        background-image: url("../assets/loginico.png");
        background-position: left -146px;
        margin: 15px 0px 1px 0px;
        padding: 0px 0px 0px 20px;
        color: #000;
    }

    .form-l {
        float: left;
        margin: 0px 0px 0px 10px;
    }

    .form-r {
        float: right;
    }

    /*全局样式*/


    .el-menu {
        border-right: none;
        text-align: left;
        background: red;
    }

    .el-submenu .el-menu-item {
        padding-left: 45px !important;
        text-align: left;
        height: 50px;
        line-height: 50px;
        padding: 0px;

    }

    .el-button--warning {
        color: #FFFFFF;
        background-color: #fb9410;
        border-color: #fb9410;
    }

    .el-button--warning:hover {
        background: #fcaf4c;
    }

    .el-button--warning.is-plain {
        color: #686868;
        background: #fff;
        border-color: #d7d8dc;
    }

    .el-button--warning.is-plain:hover, .el-button--warning.is-plain:focus {
        background: #fb9410;
        border-color: #fb9410;
        color: #FFFFFF;
    }

    .el-button--primary {
        color: #FFFFFF;
        background-color: #3c76fe;
        border-color: #3c76fe;
    }

    .el-button--primary:focus {
        background: #fb9410;
        border-color: #5487fe;
        color: #FFFFFF;
        background-color: #5487fe;
    }

    .el-button--primary:active {
        background: #fb9410;
        border-color: #5487fe;
        color: #FFFFFF;
    }

    .el-button--primary:hover {
        background: #4e82fe;
        border-color: #4e82fe;
    }

    .el-table thead {
        color: #767676;
        font-weight: 500;
    }

    .el-container{ height: 100%;}


</style>